<template>
  <div>
    <search-control :searh-bar="searhBar" @search="search" />
    <el-card style="margin: 20px">
      <el-button type="success" round class="addbtn" @click="$router.push('/business/owner/addowner')">新增货主</el-button>

      <el-table
        :data="tableData"
        border
        style="width: 70vw"
      >

        <el-table-column
          align="center"
          prop="no"
          label="序号"
          width="50"
        />

        <el-table-column
          align="center"
          prop="number"
          label="货主编号"
          width="130"
        />
        <el-table-column
          align="center"
          prop="owner"
          label="货主名称"
          width="130"
        />

        <el-table-column
          align="center"
          prop="name"
          label="联系人"
          width="130"
        />
        <el-table-column
          align="center"
          prop="mobile"
          label="联系人电话"
          width="130"
        />
        <el-table-column
          align="center"
          prop="email"
          label="联系邮箱"
          width="200"
        />
        <el-table-column
          align="center"
          prop="area"
          label="省/市/区"
          width="250"
        />
        <el-table-column
          align="center"
          prop="address"
          label="详细地址"
          width="300"
        />
        <el-table-column
          align="center"
          prop="time"
          label="更新时间"
          width="150"
        />
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="$router.push(`/business/detail/${scope.row.id}`)">查看详情</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>
    <!-- 分页 -->
    <div class="block">
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row></div>

  </div>

</template>
<script>
import SearchControl from '@/components/SearchControl'
export default {
  components: { SearchControl },
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      searhBar: [
        // 1. 一个对象对应一个表单组件 输入框 或者 下拉框
        // 2. 需要 输入框 type的值为input 下拉框 type的值为selete
        // 3. name属性是你的的表单组件的名字
        // 4. value是获取当前表单组件的值
        // 5. 当使用的表单组件的下拉框时，还要定义seleteType属性，
        //    在src\components\SearchControl\selete.js可以找到对应的值。
        { type: 'input', name: '货主编号', value: '' },
        { type: 'input', name: '货主名称', value: '' },
        { type: 'input', name: '联系人', value: '' }
      ],
      tableData: [{
        // no: 1,
        // number: 'HZ000003',
        // owner: '王姐',
        // name: '王丽莉',
        // mobile: '15821236632',
        // email: '',
        // area: '北京市 / 市辖区 / 东城区',
        // address: '和立方小区',
        // time: '2023-04-12 06:00:08',
        // operate: ''
      }]

    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 改值
    changevalue(name, value) {
      const index = this.searhBar.findIndex(item => item.name === name)
      this.searhBar[index].value = value
    },
    // 重置
    resetvalue() {
      this.searhBar.forEach(item => {
        item.value = ''
      })
    },
    // 搜索 点击搜素按钮获取表单组件的值
    search() {
      console.log(36, this.searhBar)
    }
  },
  provide() {
    return {
      searhBar: this.searhBar,
      changevalue: this.changevalue,
      resetvalue: this.resetvalue
    }
  }
}
</script>
<style scoped lang="scss">
.addbtn{
  margin: 5px 0 20px;
}

</style>
